<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>女王加冕</title>
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="../css/framework7-icons.css">
    <link rel="stylesheet" href="css/crown.css">
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="views">
    <div class="view view-main">
        <div class="navbar navbar-hidden">
            <div class="navbar-inner"></div>
        </div>
        <div class="pages navbar-through toolbar-fixed">
            <div data-page="Index" id="Index" class="page no-navbar">
                <div class="page-content" style="background: center 100% url('img/bg.jpg') repeat-y;overflow: hidden;">
                    <div class="headimg-container" style="overflow: hidden;">

                    </div>

                </div>
                <div class="toolbar">
                    <div class="toolbar-inner flex-column flex-justify-around flex-align-center">
                        <a href="#" class="link to-upload-image" style="width: 90%;height: 35px;"><div class="toolbar-btn" style="color: #000;background: #fff;">选择图片</div></a>
                        <a href="#" class="link to-add-crown" style="width: 90%;height: 35px;"><div class="toolbar-btn" style="color: #fff;background: #ff9500;">下一步</div></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script id="Headimgcontainerhor" type="text/template">
    <div style="width: 100%;height: 75px;background: rgba(0,0,0,.5);z-index: 99;"></div>
    <div style="width: 100%;height: 300px;position: relative;">
        <div style="width: {{swidth}}px;height: 300px;background: rgba(0,0,0,.5);z-index: 99;position: absolute;left: 0;top: 0;"></div>
        <img class="headimg" data-type="hor" data-pos="{{left}}" data-touchpos="0" src="{{src}}" style="height: 300px;position: absolute;top: 0;left: {{left}}px;">
        <div style="width: {{swidth}}px;height: 300px;background: rgba(0,0,0,.5);z-index: 99;position: absolute;top: 0;right: 0;"></div>
    </div>
    <div style="width: 100%;height: 75px;background: rgba(0,0,0,.5);z-index: 99;"></div>
</script>
<script id="Headimgcontainerver" type="text/template">
    <div class="flex-row flex-align-center flex-justify-center" style="width: 100%;height: 450px;">
        <div style="width: {{swidth}}px;height: 450px;background: rgba(0,0,0,.5);z-index: 99;"></div>
        <div style="width: 300px;height: 450px;position: relative;">
            <div style="width: 300px;height: 75px;background: rgba(0,0,0,.5);z-index: 99;position: absolute;left: 0;top: 0;"></div>
            <img class="headimg" data-type="ver" data-pos="{{top}}" data-touchpos="0" src="{{src}}" style="width: 300px;position: absolute;top: {{top}}px;left: 0;">
            <div style="width: 300px;height: 75px;background: rgba(0,0,0,.5);z-index: 99;position: absolute;bottom: 0;right: 0;"></div>
        </div>
        <div style="width: {{swidth}}px;height: 450px;background: rgba(0,0,0,.5);z-index: 99;"></div>
    </div>

</script>
<script type="text/javascript" src="../js/wx.jssdk.min.1.2.0.js"></script>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="js/crown.js"></script>
</body>
</html>